<template>
  <div class="x-username">
    <el-input v-model="usernameValue" :placeholder="placeholder" @blur="inputBlur"></el-input>
    <div class="x-username_intro" v-if="intro">{{intro}}</div>
  </div>
</template>
<script>
  export default {
    model: {
      prop: 'modelValue',
      event: 'chang'
    },
    props: {
      placeholder: {},
      modelValue: {}
    },
    data () {
      return {
        usernameValue: '',
        intro: ''
      }
    },
    mounted () {
      this.init()
    },
    methods: {
      async init () {
        if (this.modelValue) {
          this.usernameValue = this.modelValue
        }
      },
      async inputBlur () {
        var valueString = ''
        var para = ''
        if (this.usernameValue.indexOf('(') > -1) {
          var lengthPty = this.usernameValue.indexOf('(')
          para = this.usernameValue.slice(0, lengthPty)
        } else {
          para = this.usernameValue
        }
        if (this.usernameValue) {
          var repones = await this.$ala.httpGet('api/user/GetNameFromUserName', { username: para })
          if (repones) {
            valueString = `${para}(${repones})`
            this.usernameValue = valueString
            this.intro = ''
          } else {
            this.intro = '用户不存在'
          }
        } else {
          this.intro = ''
        }
      }
    },
    watch: {
      usernameValue: {
        deep: true,
        handler (val) {
          this.$emit('chang', val)
        }
      }
    }
  }
</script>
<style lang="scss">
  .x-username {
    .x-username_intro {
      font-size: 12px;
      color: #f56c6c;
      line-height: 20px;
    }
  }
</style>